<template>
	<div class="">
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
			
			<listTpml 
				:data="pageData"
				ref="listTpml"
				@onCommand="listCommand"
				></listTpml>
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			<addFZDialog ref="addFZDialog"  @addSucess="refresh"></addFZDialog>
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
	import listTpml from "@/view/components/listTmpl";
	
	import addFZDialog from "@/view/components/dialog/addFZDialog";
	
	import {getFzByPage,resourceDel,start,resourceStop,getFzListStatus} from "@/service/swagger/HaproxyController";
	
	import { fuzaiStatusFilter } from '@/filters/status/index';
	import {listenner} from "@/utils/statuslistener" ;
	
	export default {
		components : {
			listTpml,
			addFZDialog,
		},
		data(){
			return {
				pageData : {
					pageTitle : "负载均衡",
					filterOption : [
						{
							label : "名称", // label名
							paramsName : "name", // 出参name值
							defaultValue : "", // 出参默认值
							componentsName : "nameInput", // 组件名
						},
						{
							label : "状态", // label名
							paramsName : "status", // 出参name值
							defaultValue : "", // 出参默认值
							componentsName : "fuzaiStatusSelect", // 组件名
						}
					],
					// 列表table 设置
					listOption : {
						
						// 列表上部btn组
						listBtns : [{
							label : "添加负载均衡",
							iconfont : "icon-folder-add",
							commandName : "addFZ",
						},],
						// 列表api
						listApi : {
							serviceFN : getFzByPage ,
						},
						// 表头设置
						header : [{
							label : "名称" ,
							propName : "name",
							align:"left",
						},
						{
							label : "主机名" ,
							propName : "host",
						},
						{
							label : "状态" ,
							html : (row)=>{
								return fuzaiStatusFilter(row.status) ;
							},
						},
					
						{
							label : "转发配置数" ,
							width : "",
							propName : "ruleCount",
						},{
							label : "操作" ,
							width : "",
							btns : [{
								label : "详情",
								commandName : "goDetail",
							},{
								label : "停止",
								commandName : "stopFZ",
								show:(row)=>{
									// 运行中
									return row.status == 1 ;
								}
							},{
								label : "启动",
								commandName : "startFZ",
								show:(row)=>{
									// 已停止
									return row.status == 4 ;
								}
							},{
								label : "删除",
								commandName : "deleteFZ",
								show:(row)=>{
									// 已停止 || 异常
									return row.status == 4 || row.status == 2 ;
								}
							}],
							btnGroups : [{
								label : "转发配置",
								commandName : "goZFDetail",
								show:(row)=>{
									// 运行中
									return row.status == 1 ;
								}
							}]
						}]
						
						
					}
				}
			}
		},
		mounted(){
			
		},
		methods:{
			listCommand(command, row, index) {
				// console.log("列表进行了操作：", command,row,index );
				if (command && this[command]) {
					this[command](row, index);
				}
			
			},
			refresh(){
				this.$refs.listTpml.search();
			},
			
			listLoaded(tableData) {
				console.log("页面列表 search 完成", tableData);
				
				const statusStatic = (status) => {
					// 是否是稳定状态
					const isStatic = !(fuzaiStatusFilter(status).indexOf("...") > -1);
					return isStatic;
				}
				
				let unStaticArr = [];
				// 添加  status 监听
				tableData.forEach(el => {
					if (!statusStatic(el.status)) {
						unStaticArr.push(el.id)
					}
				});
				if (unStaticArr && unStaticArr.length) {
					listenner({
						api: {
							serviceFN: getFzListStatus,
							params: unStaticArr,
						},
						callBack: (ret) => {
	
							let hasAllStatusStaticed = true;
							ret.data.forEach(data => {
								if (!statusStatic(data.status)) {
									hasAllStatusStaticed = false;
								}
								tableData.forEach(el => {
									if(data.status == 6){
										this.refresh()
									}
									if (data.id == el.id) {
										el.status = data.status;
									}
								});
							});
							this.$refs.listTpml.loadTableData(tableData)
							return hasAllStatusStaticed;
						},
					}, this)
				}
				
			},
			
			
			addFZ(){
				this.$refs.addFZDialog.open();
			},
			goDetail(row,index){
				this.$router.push({
					path:"/zy/fz/xq",
					query:{
						id : row.id,
						instId:row.instId
					},
				})
			},
			goZFDetail(row,index){
				this.$router.push({
					path:"/zy/fz/xq",
					query:{
						id : row.id,
						activeTab : "1",
						instId : row.instId,
					},
				})
			},
			startFZ(row,index){
				
				this.$confirm(`请确认启动当前负载:${row.name}?`, "启动负载", {
	        confirmButtonText: "确定",
	        cancelButtonText: "取消",
	        //type: "warning"
	      }).then(() => {
	        start({
	        	id: row.id
	        }).then(ret=>{
	        	this.refresh()
	        })
	      });
				
			},
			stopFZ(row,index){
				
				this.$confirm(`请确认是否停止负载:${row.name}?`, "停止负载", {
	        confirmButtonText: "确定",
	        cancelButtonText: "取消",
	        //type: "warning"
	      }).then(() => {
	        resourceStop({
	        	id: row.id
	        }).then(ret=>{
	        	this.refresh()
	        })
	      });
	      
			},
			deleteFZ(row,index){
				
				this.$confirm(`此操作将永久删除负载${row.name},是否继续?`, "停止负载", {
	        confirmButtonText: "确定",
	        cancelButtonText: "取消",
	        type: "warning"
	      }).then(() => {
	        resourceDel({
	        	id: row.id
	        }).then(ret=>{
	        	this.refresh();
	        })
	      });
	      
			},
			
		}
	}
</script>

<style>
	
</style>